<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Physically-Based Materials</title>
    <meta name="description" content="Physically-Based Materials - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <script>
      AFRAME.registerComponent('generate', {
        /**
         * Creates matrix of objects with varying diffuse colors, metalnesses, and
         * roughnesses.
         */
        init: function () {
          let scene = this.el;

          for (let alpha = 0; alpha <= 1.0; alpha += 0.25) {
            for (let beta = 0; beta <= 1.0; beta += 0.25) {
              for (let gamma = 0; gamma <= 1.0; gamma += 0.25) {
                let obj = document.createElement('a-entity');
                obj.setAttribute('mixin', 'sphere');
                obj.setAttribute('material', {
                  color: new THREE.Color(gamma, gamma, gamma).getStyle(),
                  envMap: '#reflection',
                  metalness: alpha,
                  roughness: beta,
                });
                obj.object3D.position.set(alpha * 50 - 25, beta * 50 - 25, gamma * 50 - 100);
                scene.appendChild(obj);
              }
            }
          }
        }
      });
    </script>
  </head>
  <body>
    <a-scene generate background="#111">
      <a-assets>
        <a-cubemap id="reflection">
          <img src="milkyway/px.jpg">
          <img src="milkyway/nx.jpg">
          <img src="milkyway/py.jpg">
          <img src="milkyway/ny.jpg">
          <img src="milkyway/pz.jpg">
          <img src="milkyway/nz.jpg">
        </a-cubemap>
        <a-mixin id="animation" animation="easing: linear; dur: 4096; loop: true"></a-mixin>
        <a-mixin id="light" geometry="primitive: sphere; radius: .25"
                 light="color: #FFF; intensity: .5; type: point"
                 material="shader: flat"></a-mixin>
        <a-mixin id="sphere" geometry="primitive: sphere; radius: 5"></a-mixin>
      </a-assets>

      <!-- Lights. -->
      <a-entity light="color: #666; type: ambient"></a-entity>
      <a-entity mixin="animation" position="0 0 -40" animation="property: rotation; to: 0 360 0">
        <a-entity mixin="light" position="0 0 70"></a-entity>
      </a-entity>
      <a-entity mixin="animation" position="0 0 -40" animation="property: rotation; to: 360 0 0">
        <a-entity mixin="light" position="0 70 0"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
